<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">{{name}}</div>
    <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>
    <script>
        let {
          createApp,
          h,
          reactive,
          getCurrentInstance,
          onBeforeMount,
          onMounted,
          onBeforeUpdate,
          onUpdated,
          // toRefs,
          // render,
          // createVnode,
        } = VueRuntimeDOM;
        const App = {
          setup() {
            let state = reactive({ name: "hello" });
            let instance = getCurrentInstance();
            console.log(instance, 'instance');

            onBeforeMount(() => {
              console.log("before mount");
            });
            onMounted(() => {
              console.log("mount");
            });
            onBeforeUpdate(() => {
              console.log("before update");
            });
            onUpdated(() => {
              console.log("updated");
            });
            setTimeout(() => {
                state.name = "world";
            }, 1000)
            return () => {
                return h("div", null, state.name);
            };
          },
        };
          createApp(App).mount("#app");
      //   let vnode = createVnode(App);
      //   render(vnode, document.getElementById("app"))
    </script>
  </body>
</html>
